<template>
  <div class="user-box">
    <!-- header区域 -->
    <headnav>我的知心购</headnav>
    <!-- 页面核心区域 -->
    <section class="user-page">
      <!-- 用户信息 -->
      <div class="user-info">
        <div class="info">
          <img src="@/assets/user.c9f6417b.png" />
          <div v-if="userinfo">
            <p>{{ userinfo.username }}</p>
            <span class="name">用户名：{{ userinfo.username }}</span>
            <span>{{ userinfo.phone }}</span>
          </div>
          <a href="#" class="account-management" @click="$router.push('/profile')">
            <i class="iconfont icon-shezhi"></i>账号管理
          </a>
        </div>
      </div>
      <!-- 订单 -->
      <div class="user-menu">
        <div class="menu-item">
          <i class="iconfont icon-daifukuan1"></i>
          <span>待付款</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-daishouhuo1"></i>
          <span>待收货</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-money"></i>
          <span>已完成</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-icon1"></i>
          <span>全部订单</span>
        </div>
      </div>
      <div>
        <div class="user-fork">
          <div class="fork-item">
            <i>20</i>
            <span>关注的商品</span>
          </div>
          <div class="fork-item">
            <i>5</i>
            <span>关注的店铺</span>
          </div>
          <div class="fork-item">
            <i>10</i>
            <span>我的足迹</span>
          </div>
        </div>
        <p class="recommend-title">为你推荐</p>
        <recommend></recommend>
      </div>
    </section>
    <!-- tabbar区域 -->
    <tabbar :active="3"></tabbar>
  </div>
</template>
<script>
import tabbar from "../../components/tabBar.vue";
import headnav from "../../components/headnav.vue";
import recommend from "../../components/recommend.vue";
import { mapState } from "vuex";
export default {
  components: {
    tabbar,
    headnav,
    recommend,
  },
  computed: {
    ...mapState(["userinfo"]),
  },
};
</script>

<style lang="scss" scoped>
.user-box {
  margin-top: 100px;
  background: #f7f7f7;

  .user-info {
    width: 94%;
    margin: 20px 3%;
    height: 230px;
    background: linear-gradient(90deg, #eb3c3c, #ff7459);
    box-shadow: 0 2px 5px rgba(255, 98, 98, 0.4);
    border-radius: 12px;

    .info {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      padding: 50px 30px;
      box-sizing: border-box;

      img {
        width: 120px;
        height: 120px;
      }

      div {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        line-height: 40px;
        font-size: 28px;
        color: #fff;

        .name {
          color: hsla(0, 0%, 100%, 0.7);
          font-size: 26px;
          padding: 5px 0;
        }

        span {
          &:nth-child(1) {
            color: #999;
            font-size: 26px;
          }
        }
      }

      .account-management {
        position: absolute;
        top: 20px;
        right: 40px;
        font-size: 26px;
        color: rgba(76, 0, 0, 0.7);

        .iconfont {
          padding-right: 10px;
          font-size: 28px;
          color: rgba(76, 0, 0, 0.7);
        }
      }
    }
  }

  .user-menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 150px;
    background: #fff;

    .menu-item {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100px;
      text-align: center;
      margin: 25px 0;

      .iconfont {
        font-size: 50px;
        color: #dd9e58;

        .icon-money {
          font-size: 44px;
          padding-top: 6px;
        }

        .icon-icon1 {
          font-size: 44px;
          padding-top: 6px;
          color: red;
        }
      }

      span {
        padding-top: 10px;
        font-size: 24px;
        color: #000;
      }
    }
  }

  .user-fork {
    margin: 30px 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 150px;
    background: #fff;

    .fork-item {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100px;
      margin: 30px 0;
      text-align: center;

      i {
        font-style: normal;
        font-weight: bold;
        padding: 10px 0;
        font-size: 28px;
      }
    }
  }

  .recommend-title {
    width: 100%;
    height: 90px;
    padding-left: 20px;
    line-height: 90px;
    background: #fff;
    box-sizing: border-box;
  }
}
</style>